// 选中和未选中的图标字体
.iconfont{
    font-size: 50rpx;
    &.icon-xuanze-fill{
        color: var(--mainColor);
    }
    &.icon-xuanze{
        color: var(--fadeColor);
    }
}

.cart_item{
   display: flex; 
   &_left{
       width: 100rpx;
       display: flex;
       justify-content: center;
       align-items: center;
   }
   &_right{
       flex: 1;
       position: relative;
   }
   .cart_count{
       position: absolute;
       right:20rpx;
       bottom:20rpx;
       display: flex;
       align-items: center;
       &_btn{
        display: flex;
        line-height: 26rpx;
        justify-content: center;
        border-radius: 50%;
        width: 30rpx;
        height: 30rpx;
        color:#8A8A8A;
        border: 2rpx solid #8A8A8A;
       }
       &_number{
           // 既可以和大部分的计数器对齐，数量过大的时候宽度也能自动变大
           min-width: 40rpx;
           padding: 0 5rpx;
           display: flex;
           justify-content: center;
           align-items: center;
       }
   }
}

.cart_empty{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    &_image{
        width: 50%;
    }
    &_btn{
        background-color: var(--mainColor);
        color: #fff;
        padding: 20rpx 30rpx;
        border-radius: 100rpx;
    }
}

// 购物车底部操作栏
.bar{
    display: flex;
    padding: 0 20rpx;
    justify-content: space-between;
    align-items: center;
    height: 82rpx;
    border-top: 1rpx solid var(--fadeColor);
    position: fixed;
    // 定位的盒子的默认是没有宽高的，只会被内容撑出宽高
    // left + right  拉伸出一个盒子宽
    // top + bottom  拉伸出一个盒子高
    left:0;
    right: 0;
    bottom:0;
    &_info{
        display: flex;
        align-items: center;
    }
    &_select{
        display: flex;
        align-items: center;
        &_txt{
            padding:0 20rpx;
            color: var(--fadeColor);
            font-size: 24rpx;
        }
    }
    &_total{
        display: flex;
        align-items: center;
        &_price{
            color: var(--mainColor);
            &::before{
                content: "¥";
                font-size: 80%;
            }
        }
    }
    // 结算按钮
    &_btn{
        background-color: var(--mainColor);
        color:#fff;
        height: 52rpx;
        border-radius: 52rpx/2;
        min-width: 150rpx;
        font-size: 24rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        &.disabled{
            background-color: var(--fadeColor);
        }
    }
}